<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>

<p id="app2">{{ message }}</p>

<div id="app3">
    <strong v-bind:title = "message">鼠标悬停在我几秒钟看到我的动态绑定标题.</strong>
</div>

<div id="app4">
    <p v-if="isShow">现在你能看到我。</p>
</div>

<div id="app5">
    <ol>
        <li v-for="li in ol">
            {{ li.text }}
        </li>
    </ol>
</div>

<div id="app6">
    <p>{{message}}</p>
    <button v-on:click="showWords">showWords</button>
</div>

<div id="app7">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>
<script>
    var app1 = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });

    var app2  =   new Vue({
        el:'#app2',
        data:{
            message:'Hi Vue!'
        }
    });

    var app3    =   new Vue({
        el:'#app3',
        data:{
            message: '这个页面的载入时间为: ' + new Date()
        }
    });

    var app4    =   new Vue({
        el:'#app4',
        data:{
            isShow:true
        }
    });

    var app5    =   new Vue({
        el:'#app5',
        data:{
            ol:[
                {text:'Learn JavaScript'},
                {text:'Learn Vue'},
                {text:'Build something awesome'}
            ]
        }
    });

    var app6    =   new Vue({
        el:'#app6',
        data:{
            message:"hello Vue!"
        },
        methods:{
            showWords:function(){
                this.message    =   this.message.split('').join(',');
            }
        }
    });

    var app7    =   new Vue({
        el:"#app7",
        data:{
            message : 'Hello Vue'
        }
    });
</script>
</body>
</html>